<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/myExam.css">
  <style>
    :root {
      --themeColor: #56c6f5;
    }

    .achievementsBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20vw;
      height: 40vh;
      background-color: var(--themeColor);
      /* border: 1px black solid; */
      position: absolute;
      top: 20vh;
      left: 40%;
      display: none;
    }

    .achievementsBox .achievements {
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
      line-height: 20vh;
      width: 50%;
      height: 20vh;
      color: aqua;
      border-radius: 50%;
      font-size: 50px;
      background-color: #fff;
    }

    .achievementsBox .level {
      width: 50%;
      height: 5vh;
      text-align: center;
      line-height: 5vh;
      font-size: 30px;
      color: #fff;
      background-color: rgba(0, 255, 255, 0.7);
    }
  </style>
</head>

<body>
  <!-- 考试须知 -->
  <div class="exam-know">
    <h1>考试须知</h1>
    <p>1.考试过程中，请勿离开答题界面。</p>
    <p>2.答题时清注意剩余答题时间，时间用完将自动交卷。</p>
    <p>3.交卷前清仔细检查是否全部作答，以免漏题。</p>
    <p>4.系统会定时保存你的答题记录，若因故障中断，请尽快在结束前重新进入考试。</p>
    <p>5.考试如果允许多次答题，成绩以最高一次为准。</p>
    <div>
      <input type="checkbox" id="chk">
      <label class="chk" for="chk" style="color: red;">我同意遵守考试纪律，诚信考试</label>
    </div>
    <table>
      <thead class="cue">
        <tr class="cue-top">
          <td>考试ID</td>
          <td>用户</td>
          <td>题量</td>
          <td>限制时间（分钟）</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody class="add-cue cue">
      </tbody>
    </table>
  </div>
  <!-- 考试 -->
  <div class="examBox">
    <fieldset style="width: 45vw; box-shadow: 3px 3px 12px 0px var(--themeColor);">
      <legend>类型</legend>
      <span id="number"></span>
      <br>
      <span id="title">试题</span>
      <hr>
      <div id="answerblank">
        <!-- 渲染内容 -->
      </div>
    </fieldset>
    <div class="answer-sheets">
      <span class="time">考试时间剩余：</span>
      <hr>
      <div class="dxt t">
        单选题
        <ul class="dxtUl">

        </ul>
      </div>
      <div class="duoxt t">
        多选题
        <ul class="duoxtUl">

        </ul>
      </div>
      <div class="tiankt t">
        填空题
        <ul class="tianktUl">

        </ul>
      </div>
      <div class="jiandat t">简答题
        <ul class="jiandatUl">

        </ul>
      </div>
    </div>
  </div>
  <!-- 成绩显示 -->
  <div class="achievementsBox">
    <div class="achievements">成绩</div>
    <div class="level">等级</div>
  </div>
</body>
<script>
  // 改变主题
  function colorSx() {
    let colors = localStorage.getItem('color')
    document.documentElement.style.setProperty('--themeColor', colors)
  }
  colorSx()
</script>
<script src="../js/myExam.js"></script>


</html>